<template>
  <div class="category">
    <van-search
      shape="round"
      v-model="searchVal"
      @search="onSearch"
      placeholder="请输入搜索关键词"
    >
    </van-search>
    <van-sidebar v-model="activeKey">
      <van-sidebar-item
        v-for="(item, index) in category"
        :key="item.id"
        :title="item.cate_name"
        @click="clickSidebar(index)"
      />
    </van-sidebar>
    <div class="content">
      <van-tabs v-model="activeKey" sticky scrollspy color="#25c9c3" ref="tabs">
        <van-tab
          v-for="item in category"
          :title="item.cate_name"
          :key="'tab ' + item.cate_name"
        >
          <div class="title">
            <span>{{ item.cate_name }}</span>
          </div>
          <van-grid :column-num="3" clickable>
            <van-grid-item
              v-for="val in item.children"
              :key="val.id"
              :icon="val.pic"
              :text="val.cate_name"
              :to="`/productlist?sid=${val.id}&title=${val.cate_name}`"
            />
          </van-grid>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  name: "Category",
  data() {
    return {
      searchVal: "",
      category: [],
      activeKey: 0,
    };
  },
  created() {
    this.getCategory();
  },
  activated() {
    this.searchVal = "";
    this.activeKey = 0;
  },
  methods: {
    ...mapMutations(["changeLoading"]),
    getCategory() {
      this.changeLoading(true);
      this.$axios.get("/api/category").then((d) => {
        console.log("category", d.data);
        this.category = d.data.data;
        this.changeLoading(false);
      });
    },
    onSearch() {
      if (!this.searchVal) return;
      this.$router.push(`/productlist?keyword=${this.searchVal}`);
    },
    clickSidebar(index) {
      // this.$refs['tabs'].scrollTo(index);
      let tabs = this.$refs["tabs"];
      if (!tabs) return;
      var el = this.$refs["tabs"].$el.getElementsByClassName("van-tab")[index];
      if (el) el.click();
    },
  },
};
</script>

<style lang="less" scoped>
.van-search {
  position: fixed;
  z-index: 9;
  top: 0;
  left: 0;
  width: 100%;
}
.van-sidebar {
  max-height: calc(100vh - 55px - 1.33333rem);
  position: fixed;
  z-index: 8;
  top: 55px;
  left: 0;
  .van-sidebar-item::before {
    background: #25c9c3;
  }
}
.content {
  width: calc(100% - 80px);
  height: calc(100vh - 55px - 1.33333rem);
  background: #fff;
  position: fixed;
  z-index: 70;
  left: 80px;
  top: 55px;
  overflow-y: auto;
  .van-tabs {
    .van-tabs__content {
      .title {
        font-size: 15px;
        line-height: 15px;
        font-weight: lighter;
        height: 15px;
        padding: 15px 40px;
        padding-top: 25px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        white-space: nowrap;
        &::after,
        &::before {
          content: "";
          display: block;
          width: 50px;
          height: 1px;
          background: #ebedf0;
          transform: scaleY(0.5);
        }
      }
      .van-grid-item {
        ::v-deep.van-icon__image {
          mix-blend-mode: darken;
        }
      }
    }
    ::v-deep.van-sticky {
      visibility: hidden;
      height: 0;
      .van-tabs__line {
        display: none;
      }
      // &.van-sticky--fixed {
      //   visibility: unset;
      //   height: unset;
      //   .van-tabs__line {
      //     display: block;
      //   }
      // }
    }
  }
}
</style>